export default {
  'v-drag'() {
    return {
      inserted(el) {
        el.x = 0
        el.y = 0
        const pos = {
          x: 0,
          y: 0
        }
        el.addEventListener('mousedown', (e) => {
          pos.x = e.clientX
          pos.y = e.clientY
          document.addEventListener('mousemove', mouseMove)
          document.addEventListener('mouseup', mouseUp)
        })
        function mouseMove(e) {
          const curPos = {
            x: e.clientX,
            y: e.clientY
          }
          const d = {
            dX: curPos.x - pos.x,
            dY: curPos.y - pos.y
          }
          const x = el.x + d.dX
          const y = el.y + d.dY
          el.style.transform = `translate(${x}px,${y}px)`
        }
        function mouseUp(e) {
          const curPos = {
            x: e.clientX,
            y: e.clientY
          }
          const d = {
            dX: curPos.x - pos.x,
            dY: curPos.y - pos.y
          }
          const x = el.x + d.dX
          const y = el.y + d.dY
          el.style.transform = `translate(${x}px,${y}px)`
          el.x = x
          el.y = y
          document.removeEventListener('mousemove', mouseMove)
          document.removeEventListener('mouseup', mouseUp)
        }
      },
      unbind() {

      }
    }
  }
}
